<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2025-01-03 15:40:55
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-03-05 10:41:28
 * @FilePath: \web-appc:\Users\wuheng\Desktop\WugangNew\src\centerViews\purchasing\priceupdates\components\viewDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="Addprice">
    <pb-drawer v-model="isVisible" :title="'添加订货方案'" :direction="'btt'" :size="'92%'" @cancelFn="CancelFn"
      @confirmFn="confirmFn">
      <el-form :model="AddFrom" label-width="auto" :inline="true" label-position="top" ref="ruleFormRef" class="addfrom"
        :rules="fromRules">
        <el-form-item label="订货方案名称" prop="orderPlanName">
          <!-- <pb-input v-model="AddFrom.supplierName" placeholder="" /> -->
          <pb-input v-model="AddFrom.orderPlanName" placeholder="请输入供应方案名称" />
        </el-form-item>
        <el-form-item label="适用单位" class="rights">
          <div class="flex tenantNamebox">
            <!-- <pb-icon name="edit" color="rgba(13, 150, 139, 1)" class="ml-2 icons"></pb-icon> -->
            <el-popover placement="top-start" :width="200" trigger="hover" :content="tenantListName">
              <template #reference>
                <div class="popContent pb-ellipsis">{{ tenantListName }}
                </div>
              </template>
            </el-popover>
            <pb-icon name="edit" color="rgba(13, 150, 139, 1)" class="ml-2" :class="{ 'icons': tenantListName == '' }"
              @click="onTenantNameFn" style="cursor: pointer;"></pb-icon>
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <div>
            <pb-input type="textarea" v-model="AddFrom.remark" placeholder="" width="1872px" maxlength="100"
              :showwordlimit="true" :autosize="{
                minRows: 3, maxRows: 3
              }" />
          </div>
        </el-form-item>
      </el-form>
      <div class="listPrice">
        <!-- <div>物价列表</div> -->
        <pb-button size="small" plain @click="onpopupvisibleFn">
          智能导入
        </pb-button>
      </div>
      <div class="m-t3 detailTable" v-show="submitExceflge">
        <el-tabs v-model="submitExcestatus" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="待导入列表" :name="0"></el-tab-pane>
          <el-tab-pane label="错误列表" :name="1"></el-tab-pane>
        </el-tabs>
        <el-table :data="submitexcellist" style="width: 100%" :height="'390px'" border>
          <!-- 数据列 -->
          <el-table-column v-for="(column, index) in detailColumn" :key="index" :prop="column.key" :label="column.name"
            :align="column.align">
            <!-- 排除最后一列 -->
            <template #default="scope">
              <span v-if="!scope.row.editing" @click="startEditing(scope.$index)">
                {{ scope.row[column.key] }}
              </span>
              <el-input v-else v-model="scope.row[column.key]" size="small" style="width: 100%;" />
            </template>
          </el-table-column>
          <el-table-column label="错误提示" v-if="submitExcestatus">
            <template #default="scope">
              <div style="color: red;">
                {{ scope.row.dataErrorMessage }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" v-if="submitExcestatus">
            <template #default="scope">
              <pb-button v-if="scope.row.errorDataType == 'skuNoExist'" text size="small"
                @click="addSku(scope.row)">新增</pb-button>
              <!-- <pb-button text size="small" @click="addSku(scope.row)">新增</pb-button> -->
              <p class="divider mr-2 ml-2" v-if="scope.row.errorDataType == 'skuNoExist'" text size="small"></p>
              <pb-button text size="small" v-if="!scope.row.editing" @click="startEditing(scope.$index)">编辑</pb-button>
              <pb-button v-if="scope.row.editing" text size="small" @click="saveEditing(scope.row)">保存</pb-button>
              <!-- <p class="divider mr-2 ml-2" v-if="scope.row.editing" text size="small"></p>
              <pb-button v-if="scope.row.editing" text size="small" @click="offEditing(scope.row)">取消</pb-button> -->
              <p class="divider mr-2 ml-2"></p>
              <PopconfirmButton v-if="!scope.row.editing" @confirm="deleteFn(scope.row)"></PopconfirmButton>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </pb-drawer>
    <pb-popup v-model="popupvisible" Width="83.3%" :title="'智能导入'" class="intelligentimport" @close="closepopupModal">
      <el-form :model="uploadfrom" label-width="auto" :inline="true">
        <el-form-item label="请输入表头起始位置">
          <pb-input v-model.number="uploadfrom.excelTitleLineIndex" placeholder="请输入1-10000的整数" maxlength="5"
            :max="10000" @input="blurTitleLineIndex" />
        </el-form-item>
      </el-form>
      <div class="box" v-show="!tableshow">
        <div class="w-380px h-80px uploadbox">
          <el-upload drag :before-upload="beforeUpload" multiple @change="handleChange" v-show="progressstatus == ''"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
            <div class="uploadimg"><img src="../../../../assets//images/upload.png" alt=""><span>添加文件</span></div>
            <div class="el-upload__text">
              点击或拖拽文件到该页面上传，单个文件不超过15M
            </div>
          </el-upload>
          <!-- <div class="downtextBtn" v-show="progressstatus == ''">下载模板</div> -->
          <div v-show="progressstatus != ''">
            <div class="flex progressstatus">
              <div>
                <pb-icon name="uploadtext" size="24" class="m-r2" :color="'#0D968B'"
                  v-show="progressstatus != 'faild'"></pb-icon>
                <pb-icon name="faild" size="24" class="m-r2" :color="'#F52F3E'"
                  v-show="progressstatus == 'faild'"></pb-icon>
                <span :style="{ 'color': progressstatus == 'faild' ? '#F52F3E' : '' }">{{ filetext }}</span>
              </div>
              <div v-show="progressstatus == 'faild'">
                <el-upload :before-upload="beforeUpload" multiple @change="handleChange"
                  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
                  <pb-button text size="small">重新导入</pb-button>
                </el-upload>

              </div>
            </div>
            <div v-show="progressstatus != 'faild'">
              <el-progress :percentage="progress" :show-text="false" />
            </div>
          </div>
        </div>
      </div>
      <div v-show="tableshow">
        <div class="scrollbar-flex-content">
          <p class="one">目标数据表字段</p>
          <!-- orderPlanImportTitle -->
          <p v-for="(item, index) in detailData.orderPlanImportTitle" :key="index" class="scrollbar-demo-item">
            {{ item }}
          </p>
        </div>
      </div>
      <el-table :data="detailData.importExcelData" border style="width:100%" v-show="tableshow" height="500px">
        <el-table-column type="index" label="序号" width="148" />
        <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
          width="155">
          <template #header="{ column, $index }">
            <!-- {{ $index - 1 }} -->
            <!-- <pb-select v-model="selectExcelTitle[$index]" width="172" placeholder="请选择" keys="index" label="label"
              :options="ExcelTitleList" @change="getExcelTitlefn" :disabled="true" /> -->
            <el-select v-model="selectExcelTitle[$index - 1]" placeholder="请选择" style="width: 125px"
              @change="getExcelTitlefn($event, $index - 1)" clearable>
              <el-option v-for="item in ExcelTitleList" :key="item.index" :label="item.label" :value="item.index"
                :disabled="item.disabled" />
            </el-select>
          </template>
          <template #default="scope">
            <span>{{ scope.row[column.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="el-dialog__footer">
          <div class="solid"></div>
          <div class="dialog-footer">
            <el-upload :before-upload="beforeUpload" multiple @change="handleChange"
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"><pb-button
                size="small" secondary class="m-r3" v-show="tableshow">重新导入</pb-button></el-upload>
            <pb-button size="small" secondary class="m-r3" @click="closepopupModal">取消</pb-button>
            <pb-button size="small" @click="confirmBtn" v-if="num > 8">
              确定
            </pb-button>
          </div>
        </div>
      </template>
    </pb-popup>
    <addModifPop ref="addPopRef" @refresh="resetFn" :purCycle="purCycle"></addModifPop>
    <EditTenantName ref="refEditTenants" @updatatenant="updatatenant" />
  </div>
</template>
<script setup lang="ts">
import { formattedDate } from '@/utils/moment'
import { createMessage } from "@/Public-UIlibrary/pb-message/method";
import {
  SubmitOrderPlanExcelApi, GetOrderPlanExcelApi, restartOrderPlanExcelApi, editOrderPlanExcelTempApi, DeleteOrderPlanExcelTempApi, addOrderPlanApi,
  GetkitchenListApi
} from '@/api/Purchasing'
import addModifPop from '@/centerViews/basicInformation/skuManage/skuInformation/components/addModifPop.vue'
import EditTenantName from './editTenantName.vue'
const refEditTenants = ref(null as any)
const onTenantNameFn = () => {
  refEditTenants.value.show(kitchenList.value, defaultKitchenlist.value)
}
const updatatenant = (TenantName: any, TenantIdList: any, defaultList: any) => {
  tenantListName.value = TenantName
  // console.log(TenantIdList, '2')
  tenantIDList.value = TenantIdList
  defaultKitchenlist.value = defaultList
}
const addPopRef = ref(null as any)
const addSku = (row: any) => {
  console.log(row, 'sku数据')
  row.externalCode = row.externalCode
  addPopRef.value.showFn(JSON.parse(JSON.stringify(row)))
}
const purCycle = ref([])
const resetFn = (id: any) => {
  submitexcellist.value = []
  restartOrderPlanExcelApi({ orderPlanDetailsTempId: id }).then(res => {
    if (res.code == 2000) {
      getsubmitlistexcel()
    }
  })
}
const tenantListName = ref('')
const tenantIDList = ref([] as any)
const blurTitleLineIndex = (e: Event) => {
  const inputElement = e.target as HTMLInputElement;
  let value = inputElement.value;
  // 使用正则表达式移除非数字字符
  value = value.replace(/[^0-9]/g, '');
  // 将处理后的值转换为数字
  let numValue = parseInt(value, 10);
  // 检查值是否在 1 - 10000 范围内
  if (isNaN(numValue)) {
    numValue = 1; // 如果不是有效数字，重置为 1
  } else if (numValue < 1) {
    numValue = 1; // 如果小于 1，重置为 1
  } else if (numValue > 10000) {
    numValue = 10000; // 如果大于 10000，重置为 10000
  }
  // 更新输入框的值
  uploadfrom.excelTitleLineIndex = numValue;
  inputElement.value = numValue.toString();
};
const columns = ref([
  { prop: 'id', label: 'ID' },
  { prop: 'id', label: '姓名' },
  { prop: 'id', label: '年龄' },
  { prop: 'id', label: 'ID' },
  { prop: 'id', label: '姓名' },
  { prop: 'id', label: '年龄' },
  { prop: 'id', label: '年龄' },
  { prop: 'id', label: '年龄' },
  { prop: 'id', label: '年龄' },
  // 其他列定义...
])
import type { FormInstance } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const fromRules = {
  orderPlanName: [
    { required: true, message: '请输入订方案名称', trigger: 'blur' }
  ]
}
const closepopupModal = () => {
  popupvisible.value = false
}
const progressstatus = ref('')
const filetext = ref('')
const deleteFn = (row: any) => {
  DeleteOrderPlanExcelTempApi({
    "orderPlanDetailsTempIdList": [row.orderPlanDetailsTempId]
  }).then(res => {
    if (res.code == 2000) {
      createMessage({
        message: '删除成功'
      })
      getsubmitlistexcel()
    }
  })
}
const submitExceflge = ref(false)
const submitExcestatus = ref(0)
const submitexcellist = ref([] as any)
const handleClick = (tab: any) => {
  submitexcellist.value = []
  submitExcestatus.value = tab.props.name
  getsubmitlistexcel()
}
const offEditing = (row: any) => {
  row.editing = false
}
const startEditing = (rowIndex: number) => {
  submitexcellist.value.map(ele => {
    ele.editing = false
  })
  submitexcellist.value[rowIndex].editing = true
}
const saveEditing = (row: any) => {
  // console.log(row, '23212321')
  let { orderPlanDetailsTempId, skuCode, externalCode, skuName, accountingUnitName, orderCycle, specifications, maxOrderQuantity, requiredOrder, smallOrderQuantity, orderQuantization } = row
  editOrderPlanExcelTempApi({
    orderPlanDetailsTempId,
    externalCode,
    skuName,
    skuCode,
    specifications,
    accountingUnitName,
    orderQuantization,
    smallOrderQuantity,
    orderCycle,
    maxOrderQuantity,
    requiredOrder
  }).then(res => {
    if (res.code == 2000) {
      createMessage({
        message: '编辑成功'
      })
      getsubmitlistexcel()
      row.editing = false;
    }
  })
}
const getsubmitlistexcel = () => {
  GetOrderPlanExcelApi({
    "currentPage": 1,
    "pageSize": -1,
    "sortingFields": [
      {
        "field": "",
        "order": ""
      }
    ],
    "errorData": submitExcestatus.value
  }).then(res => {
    if (res.code == 2000) {
      submitexcellist.value = res.data.records
    }
  })
}
const supplyDetailst = ref([] as any)
const confirmBtn = () => {
  // console.log(selectExcelTitle.value, '2', detailData.value.skuSupplyImportTitleColumns)
  detailData.value.orderPlanImportTitleColumns.forEach((ele: any, index: number) => {
    console.log(ele, selectExcelTitle.value[index])
    detailData.value.importExcelData.forEach((detailel: any, dindex: number) => {
      // detailel.selectExcelTitle.value[index]
      detailel[ele] = detailel[selectExcelTitle.value[index]]
      // console.log(supplyDetailst.value[dindex], '2', ele)
    });
  });
  // console.log(detailData.value.skuSupplyImportTitleColumn, '222')
  supplyDetailst.value = detailData.value.importExcelData.map(item => {
    // 创建一个新对象来存储过滤后的属性
    const filteredItem: any = {};

    // 遍历键的数组
    detailData.value.orderPlanImportTitleColumns.forEach(key => {
      // 检查当前对象是否具有该键
      if (item.hasOwnProperty(key)) {
        // 如果具有，则将属性复制到新对象中
        filteredItem[key] = item[key];
      }
      // 如果不具有，则不执行任何操作，从而过滤掉该键（实际上是忽略，因为不在新对象中创建它）
    });

    // 返回过滤后的对象
    return filteredItem;
  });
  SubmitOrderPlanExcelApi({
    orderPlanDetailsTempSaveReqList: supplyDetailst.value,
    selectionTitle: selectExcelTitle.value
  }).then(res => {
    if (res.code == 2000) {
      num.value = 0
      getsubmitlistexcel()
      popupvisible.value = false
      submitExceflge.value = true
    }
  })
}
const selectExcelTitle = ref([] as any)
const ExcelTitleList = ref([] as any)
import { ImportExcelOrderPlanApi } from '@/api/upload'
const progress = ref(null as any)
const tableshow = ref(false)
const beforeUpload = (file: any) => {
  return false
}
const uploadfrom = reactive({
  excelTitleLineIndex: 10
})
let num = ref(0)
const getExcelTitlefn = (el: any, Forindex: number) => {
  ExcelTitleList.value.forEach((ele: any) => {
    ele.disabled = false;
  });
  num.value = 0
  ExcelTitleList.value.forEach((ele: any) => {
    selectExcelTitle.value.forEach((els: any, index: number) => {
      if (ele.index == els) {
        // console.log(ele.index, Forindex, '222', el)
        ele.disabled = true
        num.value++
      }
    })
  });
  columns.value[Forindex].prop = String(el)
}
const uploadFile = async (file: any) => {
  tableshow.value = false;
  progress.value = 0;
  const formData = new FormData();
  // console.log(file, '1122')
  filetext.value = file.name
  formData.append('file', file.raw);
  formData.append('excelTitleLineIndex', uploadfrom.excelTitleLineIndex);
  // ImportExcelOrderPlanApi
  ImportExcelOrderPlanApi(formData, (uploadProgress: number) => {
    // 更新组件的progress数据属性
    // console.log('123123我监听进度')
    progress.value = uploadProgress;
  })
    .then(res => {
      ExcelTitleList.value.length = 0
      // 处理成功响应（通常这里会是文件上传完成后的服务器响应）
      console.log('File uploaded successfully:', res, res.data.selectionTitle);
      if (res.code == 2000) {
        setTimeout(() => {
          tableshow.value = true
          detailData.value = res.data
          AddFrom.orderPlanName = res.data ? res.data.orderPlanName ? res.data.orderPlanName : '' : ''
          res.data.importExcelTitle.forEach((ele: any, index: any) => {
            ExcelTitleList.value.push({
              label: ele,
              index: index,
              ExcelModelvalue: '',
              disabled: false
            })
          });
          // supplyDetailst.value = new Array(res.data.importExcelData.length).fill({})
          selectExcelTitle.value = res.data.selectionTitle.map((el: any) => Number(el))
          // selectExcelTitle.value = res.data.selectionTitle
          ExcelTitleList.value.forEach((ele: any) => {
            selectExcelTitle.value.forEach((els: any, index: number) => {
              if (ele.index == els && els < res.data.importExcelTitle.length) {
                // console.log(ele, '222', els)
                ele.disabled = true
                num.value++
                columns.value[index].prop = String(ele.index)
              }
            })
          });
        }, 500);
      } else {
        progressstatus.value = 'faild'
      }
    })
    .catch(error => {
      // 处理错误响应
      progressstatus.value = 'faild'
      console.error('Error uploading file:', error);
    })
};
const handleChange = (file: any) => {
  if (!file) return;
  const allowedMimeTypes = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
  // 允许的文件扩展名
  const allowedExtensions = ['.xls', '.xlsx'];
  // 允许的最大文件大小，单位为字节，这里假设最大为 50MB
  const maxSize = 15 * 1024 * 1024;
  const isAllowedType = allowedMimeTypes.includes(file.type) || allowedExtensions.some(ext => file.name.toLowerCase().endsWith(ext));
  // 检查文件大小是否符合要求
  const isAllowedSize = file.size <= maxSize;
  if (isAllowedType && isAllowedSize) {
    progressstatus.value = 'task'
    progress.value = 0
    const filesToUpload = Array.isArray(file) ? file : [file];
    filesToUpload.forEach(uploadFile);
  } else {
    if (!isAllowedType) {
      createMessage({
        message: '不支持的文件格式，请上传 Excel 文件（.xls 或 .xlsx）。',
        type: 'error'
      })
    }
    if (!isAllowedSize) {
      createMessage({
        message: '文件大小超过限制，最大允许15MB。',
        type: 'error'
      })
    }
  }
};
const emit = defineEmits(['confirmaddVisibleFn', 'canceladdisVisibleFn'])
const props = defineProps({
  addVisible: {
    type: Boolean,
    default: false
  },
  SupplierList: {
    type: Array,
    default: [] as any
  }
})
const AddFrom = reactive({
  remark: '',
  orderPlanName: ''
})
const popupvisible = ref(false)
const onpopupvisibleFn = () => {
  // console.log('22')
  progressstatus.value = ''
  progress.value = 0
  num.value = 0
  tableshow.value = false
  popupvisible.value = true
}
const isVisible = ref(false)
const kitchenList = ref([] as any)
const defaultKitchenlist = ref([] as any)
watch(
  () => props.addVisible,
  (val) => {
    if (ruleFormRef.value) {
      ruleFormRef.value.resetFields(); // 重置表单并清除校验规则
    }
    tenantIDList.value = []
    GetkitchenListApi().then(res => {
      if (res.code == 2000) {
        kitchenList.value = res.data
        defaultKitchenlist.value = res.data
        const names = kitchenList.value.map(item => item.tenantName);
        res.data.map(el => {
          tenantIDList.value.push(el.tenantId)
        })
        tenantListName.value = names.length > 1 ? names.join(',') : names[0] || '';
      }
    })
    // console.log(val, '2')
    submitExceflge.value = false
    clearObjKey(AddFrom)
    isVisible.value = val
  }
)
const detailData = ref([] as any)
const excelcolunmn1 = () => (
  [
    {
      key: "externalCode",
      name: "外部编码"
    },
    {
      key: "skuName",
      name: "SKU名称",
    },
    {
      key: "accountingUnitName",
      name: "计量单位",
    },
    {
      key: 'specifications',
      name: "规格",
    },
    {
      key: 'orderQuantization',
      name: '订货取整',
      align: 'right'
    },
    {
      key: 'smallOrderQuantity',
      name: '最小订货数量',
      align: 'right'
    }, {
      key: 'maxOrderQuantity',
      name: '最大订货数量',
      align: 'right'
    },
    {
      key: 'price',
      name: "订货周期",
    },
  ]
)
const detailColumn = ref(excelcolunmn1() as any)
const CancelFn = () => {
  // console.log('22')
  emit('canceladdisVisibleFn')
}
const confirmFn = async () => {
  console.log('222')
  if (ruleFormRef.value) {
    await ruleFormRef.value.validate((valid) => {
      if (valid) {
        // 提交表单
        let { remark, orderPlanName } = AddFrom
        addOrderPlanApi({
          remark,
          orderPlanName,
          supplyTenantIdList: tenantIDList.value
        }).then(res => {
          if (res.code == 2000) {
            createMessage({
              message: '添加成功'
            })
            emit('confirmaddVisibleFn')
          }
        })
      } else {
        // 处理验证错误
      }
    })
  }
}
const clearObjKey = (clearForm: any) => {
  Object.keys(clearForm).forEach((key: any) => {
    if (Array.isArray(clearForm[key])) {
      // 如果属性是数组，则清空数组
      clearForm[key].length = 0;
    } else {
      // 如果属性不是数组，则设置为默认值（默认为空字符串）
      clearForm[key] = '';
    }
  });
}
</script>
<style lang="scss">
.Addprice {
  .el-upload-dragger {
    padding: 20px 10px;
  }
}
</style>
<style lang="scss" scoped>
.Addprice {
  .solid {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.10);
  }

  .dialog-footer {
    display: flex;
    margin: 16px 26px 0 16px;
    padding-bottom: 16px;
    justify-content: right;
  }

  .progressstatus {
    justify-content: space-between;
    align-items: center;
  }

  .detailTable {
    ::v-deep thead th {
      background: #F5F5F5 !important;
    }
  }
}

.addfrom {
  padding-top: 24px;

  .rights {
    width: 37%;

    // .rightsbox {
    //   white-space: nowrap;
    //   /* 确保文本在一行内显示 */
    //   overflow: hidden;
    //   /* 超出容器部分隐藏 */
    //   text-overflow: ellipsis;
    // }
  }

}

.listPrice {
  display: flex;
  justify-content: right;
}

.intelligentimport {
  .box {
    width: 100%;
    height: 632px;
    display: grid;
    place-items: center;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);

    .uploadbox {
      .uploadimg {
        >img {
          width: 16px;
          vertical-align: text-bottom;
          height: 16px;
          margin-right: 8px;
        }

        font-family: PingFang SC,
        PingFang SC;
        font-weight: 600;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        margin-bottom: 12px;
      }
    }
  }

  .el-upload-dragger {
    padding: 0;
  }




  .scrollbar-flex-content {
    display: flex;
    // background: rgba(0, 0, 0, 0.04);
    line-height: 40px;
    height: 40px;
    color: #909399;
    // width: 1530px;

    .one {
      width: 159px;
      padding: 0 12px;
      flex-shrink: 0;
      display: flex;
      background: rgba(0, 0, 0, 0.04);
      align-items: center;
      justify-content: left;
    }
  }

  .scrollbar-demo-item {
    background: rgba(0, 0, 0, 0.04);
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: left;
    width: 154px;
    text-align: center;
  }
}

.popContent {
  max-width: 500px;
  overflow: hidden;
}

.downtextBtn {
  text-align: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  cursor: pointer;
  color: #0D968B;
}

.tenantNamebox {
  position: relative;
  align-items: center;

  .icons {
    margin-top: 8px;
  }
}
</style>
